<template>
  <el-card shadow="never" class="h-full">
    <template #header>
      <div class="flex justify-between h-3">
        <span class="mr-5px">销售排行榜</span>
        <el-tag v-if="isSuperAdmin" type="primary">全平台</el-tag>
        <el-tag v-else type="primary">当前店铺</el-tag>
      </div>
    </template>
    <el-skeleton :loading="loading" animated>
      <div v-if="productSaleRanking && productSaleRanking.length" class="flex flex-col">
        <div class="flex items-center justify-between text-sm text-gray-600">
          <div class="ml-5px">产品信息</div>
          <div>销量</div>
        </div>
        <div
          v-for="(item, index) in productSaleRanking"
          :key="index"
          class="flex flex-col text-sm text-gray-700"
        >
          <el-divider border-style="dashed" />
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <el-image
                class="w-20px h-20px cursor-pointer"
                :src="item.spuPicUrl || '/placeholder.png'"
                :preview-src-list="[item.spuPicUrl || '/placeholder.png']"
                :initial-index="0"
                :preview-teleported="true"
                :hide-on-click-modal="true"
              />
              <span class="ml-5px">{{ item.spuName }}</span>
            </div>
            <div>{{ item.salesCount }}笔</div>
          </div>
        </div>
      </div>
      <div v-else class="flex items-center justify-center text-gray-600"> 暂无排行数据 </div>
    </el-skeleton>
  </el-card>
</template>
<script lang="ts" setup>
import * as IndexStatisticsApi from '@/api/home'
import { checkRole } from '@/utils/permission'

defineOptions({ name: 'ProductSaleRankingCard' })

const isSuperAdmin = computed(() => checkRole(['super_admin', 'platform_admin', 'tenant_admin']))

const productSaleRanking = ref<any>([])

/** 查询排行榜 */
const loading = ref(true) // 加载中
const getRanking = async () => {
  loading.value = true
  try {
    productSaleRanking.value = await IndexStatisticsApi.getProductSaleRanking()
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  await getRanking()
})
</script>

<style scoped>
:deep(.el-divider--horizontal) {
  margin: 10px 0;
}
</style>
